<template>
	<view class="margin-bottom-xl padding-bottom-xl">
		<cu-custom bgColor="bg-gradual-pink" :isBack="false"><block slot="content">发现</block></cu-custom>
		<swiper
			class="card-swiper"
			:class="dotStyle ? 'square-dot' : 'round-dot'"
			:indicator-dots="true"
			:circular="true"
			:autoplay="true"
			interval="5000"
			duration="500"
			@change="cardSwiper"
			indicator-color="#8799a3"
			indicator-active-color="#0081ff"
		>
			<swiper-item v-for="(item, index) in swiperList" :key="index" :class="cardCur == index ? 'cur' : ''">
				<view class="swiper-item">
					<image :src="item.advertisementAdUrl" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<scroll-view scroll-x class="bg-white nav" >
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect" :data-id="index">
					{{tabNav[index]}}
				</view>
			</view>
		</scroll-view>
		

		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-title text-red "></text>
				当前活动
			</view>
		</view>
		<view class="cu-list menu-avatar">
			<view v-if="currActivityList.length == 0" class="cu-item">
				<view class="content">
					<view class="text-grey">暂无进行中的活动</view>
				</view>
			</view>
			<view v-else class="cu-item" v-for="(item, index) in currActivityList" :key="index" @click="toDetailPage(item)">
				<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
				<view class="content">
					<view class="text-grey">{{item.startDate.split(' ')[0]}} {{item.title}}</view>
					<view class="text-gray text-sm flex"><view class="text-cut">{{item.memo}}</view></view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">{{item.startDate.split(' ')[1]}}</view>
					<view class="cu-tag round sm" :class="item.status == '报名中' ? 'bg-blue' : 'bg-green'">{{item.status}}</view>
				</view>
			</view>
			
		</view>
		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-title text-grey "></text>
				历史活动
			</view>
		</view>
		<view class="cu-list menu-avatar margin-bottom-xl">
			<view v-if="historyActivityList.length == 0" class="cu-item">
				<view class="content">
					<view class="text-grey">暂无历史活动</view>
				</view>
			</view>
			<view v-else class="cu-item" v-for="(item, index) in historyActivityList" :key="index" @click="toDetailPage(item)">
				<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
				<view class="content">
					<view class="text-grey">{{item.startDate.split(' ')[0]}} {{item.title}}</view>
					<view class="text-gray text-sm flex"><view class="text-cut">{{item.memo}}</view></view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">{{item.startDate.split(' ')[1]}}</view>
					<view class="cu-tag round bg-grey sm">{{item.status}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as ResponseStatus from '@/common/response-status.js'
	import {
		BASE_URL,
		doPostForm,
		doPostJson,
		showInfoToast,
		doGet,
		nullToStr,
		FRONT_BASE_URL
	} from '@/common/util.js'
	import {advertisement} from '@/common/advertisement.js'
export default {
	data() {
		return {
			swiperList: [
				// {
				// 	id: 0,
				// 	type: 'image',
				// 	url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
				// },
				// {
				// 	id: 1,
				// 	type: 'image',
				// 	url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg'
				// },
				// {
				// 	id: 2,
				// 	type: 'image',
				// 	url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
				// },
				// {
				// 	id: 3,
				// 	type: 'image',
				// 	url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
				// },
				// {
				// 	id: 4,
				// 	type: 'image',
				// 	url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
				// },
				// {
				// 	id: 5,
				// 	type: 'image',
				// 	url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
				// },
				// {
				// 	id: 6,
				// 	type: 'image',
				// 	url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
				// }
			],
			currActivityList: [],
			historyActivityList: [],
			TabCur: 0,
			tabNav: ['黑色玫瑰', '艾欧尼亚'],
			frontBaseUrl: FRONT_BASE_URL,
		};
	},
	mounted() {
		this.initLoad()
	},
	methods: {
		initLoad() {
			this.loadAllActivity()
			this.loadCarouselList()
		},
		toDetailPage(item) {
			uni.navigateTo({
				url: '/pages/activity/activity_detail?activityId='+ item.id
			});
		},
		/**
		 * 加载轮播图
		 */
		loadCarouselList() {
			advertisement(1, 5, 'index_slider').then(response => {
				let [error, res] = response
				this.swiperList = []
				if (res.data.code === ResponseStatus.OK) {
					let rows = res.data.data.rows
					if (rows.length) {
						rows.forEach(item => {
							if (item.advertisementAdUrl !== '' && item.advertisementAdUrl.indexOf('http') < 0) {
								item.advertisementAdUrl = FRONT_BASE_URL + item.advertisementAdUrl;
							}
							this.swiperList.push(item)
						})
					}
					this.swiperList = res.data.data.rows
				}
			}).catch(error => {
				console.log(error)
			})
		},
		/** tab页面切换 */
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			this.loadAllActivity()
		},
		/** 加载全部活动信息 */
		loadAllActivity() {
			uni.showLoading({
				title: '加载中...'
			})
			let data = {
				isActive: 0,
				sortColumn: 'start_date',
				sortOrder: 'desc',
				regional: this.tabNav[this.TabCur]
			}
			doPostJson('/activity/any/all-cond', data, {}, false).then(response => {
				uni.hideLoading()
				this.historyActivityList = []
				this.currActivityList = []
				let [error, res] = response;
				if (res.data.code === ResponseStatus.OK) {
					const rows = res.data.data.rows
					if (rows.length) {
						rows.forEach(item => {
							if (item.status == '已结束') {
								this.historyActivityList.push(item)
							} else {
								this.currActivityList.push(item)
							}
						})
					}
					
				} else {
					showInfoToast(res.data.message);
				}
			})
		},
		cardSwiper(e) {
			this.cardCur = e.detail.current
		},
	}
};
</script>

<style>
.page {
	overflow: scroll;
	height: 100vh;
	width: 100vw;
}

.page.show {
	overflow: hidden;
}

.switch-sex::after {
	content: '\e716';
}

.switch-sex::before {
	content: '\e7a9';
}

.switch-music::after {
	content: '\e66a';
}

.switch-music::before {
	content: '\e6db';
}

.zy-top {
	margin-top: 100upx;
}
</style>
